<?php


  require_once('config.php');

  $sql="select * from picture where is_open=1 order by updateTime limit 8";

    $res = $con->query($sql);

    $num = mysqli_fetch_array($con->query("select count(*) from picture"));

    $num = $num[0];

    $data = array();
while($row = mysqli_fetch_assoc($res)){
    $data[] = $row;
}


?>

<!docType html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="css/991939cafa0343d781d3eba9e3bd5ffb.css" />
    <link rel="stylesheet" href="css/0b246469176b4b6ca3ce49654ba75d82.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper-4.3.2.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-4.0.0.min.css" />
    <link rel="stylesheet" href="css/fontawesome-all-5.0.9.min.css" />

    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="css/global.large.css">
    <link rel="stylesheet" media="screen and (max-width: 991px)" href="css/global.tablet.css">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/global.mobile.css">
	 <!--        Secondary CSS       -->
    <link rel="stylesheet" href="css/simplelightbox.min.css"/>
    <link rel="stylesheet" href="css/why-choose-us.css" />
    <link rel="stylesheet" media="screen and (max-width: 991px)" href="css/why-choose-us.tablet.css" />

   
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/news.mobile.css">

   
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/portfolio.mobile.css">

    <link rel="stylesheet" href="css/comics.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/comics.mobile.css">

   
    <link rel="stylesheet" href="css/contact-us.css" />

    <link rel="stylesheet" href="css/our-partners.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/our-partners.mobile.css">
    <link rel="stylesheet" href="css/loading.css" />
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEO3TWX1r4bJBNSf34xWPGGLvcjqtKX4k" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        ul,ul li{
            list-style: none;
        }
        main .light-theme1 {background: url(img/backgrpund_99.jpg) left top/100% 100%;}
        .type li h4{margin-top:8px!important;}
        .type li{margin-bottom:12px!important;}
        @media all and (orientation : landscape) { 
           .swiper-slide img {max-height:100%!important;}
} 
    </style>
</head>

<body onload="init()">
    <div class="background"></div>
    <header class="brand">
        <h1 class="logo">
            <span>良師棚業有限公司</span>
        </h1>

        <div style="padding:0 5%;">
            
        <img class="lazy" data-original="img/xieti.png" style="margin-right: 6px; width:100%;" />

        </div>
        <!--<i class="fas fa-chevron-down"></i>-->

        <div class="top_box_2" style="position: absolute;text-align: center;top: 55%; left: 48%;">
          <p style="text-align: center;margin-top:60px;">
            <img  class="lazy" data-original="img/guide2.gif"  class="img_first" style="display:inline-block;text-align: center;width: 30px;height: 30px;"/></p>
        </div>
    </header>
    <nav>

	   <a class="logo" href="wap_home.php" style="margin:0 auto;width: 15%;">
          <div style="text-align: center;"><img src="img/home.png" style="width: 70%;" /></div>
        </a>
        <a class="logo" target='_blank' href="https://api.whatsapp.com/send?phone=85268801666" style="margin:0 auto;width: 70%;">
          <div style="text-align: center;display: block;margin:0 auto;"><img src="img/logoen.png" style="width: 80%;" /></div>
        </a>
        <div class="tablet mobile bars"><i class="far fa-bars"></i></div>
        <ul>  
            <li data-section="why-choose-us">WHY CHOOSE US</li>

            <li data-section="sevices">OUR SERVICES</li>

            <li data-section="type">OUR PROCESS</li>

            <li data-section="articles">NEWS</li>

            <li data-section="contact-us">CONTACT US</li>

            <li data-section=""><a href="wap_home.php" style="color: #fff">中文</a></li>
        </ul>
    </nav>

    <main>
        <!--            Why choose us           -->
        <section class="why-choose-us dark-theme" id="why-choose-us">
            <content class="container">
                <h2>WHY CHOOSE US</h2>

                <ul class="row">
                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="img/inco_money.png"/>
                        <h3>Affordability</h3>
                        <p style="text-align: left;">We ensure that we understand our client’s requirement clearly, and aim to provide the most accurate and cost effective scaffolding solution without unnecessary gold plating, so as to achieve significant cost savings.  </p>
                    </li>

                   <li class="col-md-6 col-sm-12">
                      <img class="lazy" data-original="images/fuwu_icon.png"  />
                        <h3>Service Quality</h3>
                        <p style="text-align: left;">We understand clearly that, the scaffold is the construction workers’ safety platform. A safe, stable and good quality scaffold will greatly increase the productivity of the workers. As such, we will never sacrifice the trust of our client by providing careless solution or try to cut cost where safety matters.  </p>
                    </li>

                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="images/heat.png" />
                        <h3>Attention to Detail</h3>
                        <p style="text-align: left;">We have a team of qualified, skilled workers with professional certifications recognised by the government. Our years of working experience has enabled us to clearly understand the dangers of working in high areas.</p>
                    </li>

                   
                    

                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="images/fanglv_icon.png"  />
                        <h3>Safety Reliability</h3>
                        <p style="text-align: left;">
                        We are not only concerned about the safety of our workers, but also the need to ensure the scaffold is completely safe for use as well as for the public, throughout the construction period. It is our basic responsibility to be seriously careful and meticulous about every detail related to safety measures, with the aim to reduce the risk of working at high areas to the minimum.
                        </p>
                    </li>
                </ul>
               
            </content>
        </section>

        <!--           OUR SERVICES         -->
        <section class="sevices light-theme1" id="news">
            <content class="container">
                <h2 style="color: #124d73;">OUR SERVICES</h2>

               <div class="three_ul">
                        <ul>
                            <li class="col-sm-2">
                                <span>HongKong</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                            <li class="col-sm-2">
                                <span >Kowloon</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                            <li class="col-sm-2">
                                <span>New Territories</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="three_font_thr_img" style="width: 100%;margin-top: 10%;">
                        <div class="three_img_img" style="margin:0 auto;width: 100%;">
                            <img width="100%" class="lazy" data-original="img/floor1.png"/>
                        </div>
                        
                        <div class="three_four_img" style="float: left;width: 100%;margin-top: 4%;">
                            <div class="three_four_img" style="margin: 0 auto;width: 100%;">
                                <img width="100%"  class="lazy" data-original="img/floor2.png"/>
                            </div>
                        </div>
                        
                    </div>
            </content>
        </section>
        <div class="clear"></div>
        <!--        Our  type           -->
        <section class="ussevices dark-theme"  style="background: url(img/06.jpg) no-repeat ;background-size:cover;color:#FFF;">
            <content class="container">
                <h2 style="text-align:center;">OUR SERVICES</h2>

                <ul class="row">
                  

                   <li class="col-md-6 col-sm-12">
                        <div class="liimg">
                           <img class="lazy" data-original="images/sever2.jpg"  />
                              </div> 
                          <div class="lips">
                          <h3>Ladder Scaffold </h3>
                        <p style="text-align: left;">(provide required scaffolding services for the replacement, installation or maintenance of plumbing, gas pipes and various types of pipes).</p>
						</div>
                        </li>

                   <li class="col-md-6 col-sm-12">
                        <div class="liimg">
                           <img class="lazy" data-original="images/sever3.jpg"  />
                             </div> 
                          <div class="lips">
                          <h3>Maintenance of Double Scaffolding </h3>
                        <p style="text-align: left;"> (provide required scaffolding services for grey water, paint, waterproofing, refurbishment of village houses/buildings).</p>
						</div>
                  </li>
					
					 <li class="col-md-6 col-sm-12">
                    <div class="liimg">
                       <img class="lazy" data-original="images/sever1.jpg"  />
                     </div> 
                     <div class="lips">
                     <h3>Hanging Scaffold</h3>
                        <p style="text-align: left;">
						(installation or maintenance of aluminum windows, split machines, hoses, and various types of pipes, and construction and demolition projects provide the necessary scaffolding services).
                        </p>
                        </div>
                    </li>
                   <li class="col-md-6 col-sm-12">
                        <div class="liimg">
                          <img class="lazy" data-original="images/sever4.jpg"  />
                            </div> 
                         <div class="lips">
                         <h3>Indoor and outdoor ceiling shelving/bamboo scaffolding </h3>
                        <p style="text-align: left;">
						(providing necessary scaffolding services for maintenance of fire hose, ceilings, ducts, etc.)
                        </p>
                            </div>
                    </li>
                </ul>
         
                <ul class="row" >
                   <li class="col-md-6 col-sm-12" style="text-align:left;">
                   <div class="liimg">
                      <img class="lazy" data-original="images/sever5.jpg"  />
                        </div> 
                     <div class="lips">
                     <h3>Demolition of scaffolds/bamboo scaffolding </h3>
                        <p style="text-align: left;">
						(for demolition works scaffolding services).
                        </p>
                    </li>

                   <li class="col-md-6 col-sm-12">
                   <div class="liimg">
                     <img class="lazy" data-original="images/sever6.jpg"  />
                      </div> 
                     <div class="lips">
                     <h3>Signboard Scaffolding/Bamboo Scaffolding</h3>
                        <p style="text-align: left;">(for Qingshen Signboard Project Shedging Service)</p>
						    </div>                    
                   </li>
                   <li class="col-md-6 col-sm-12">
                   <div class="liimg">
                      <img class="lazy" data-original="images/sever7.jpg"  />
                       </div> 
                     <div class="lips">
                     <h3>Facade shelving/bamboo scaffolding </h3>
                        <p style="text-align: left;"> (for the signage of the Qing dynasty or scaffolding service for the air-conditioning and shelter project)</p>
						 </div>
                    </li>

                   <li class="col-md-6 col-sm-12">
                   <div class="liimg">
                     <img class="lazy" data-original="images/sever8.jpg"  />
                       </div> 
                     <div class="lips">
                     <h3>Bamboo Scaffolding, Metal Scaffolding, Hybrid Scaffolding</h3>
                         <p style="text-align: left;">
                          (Other than the above, we also undertake and welcome any inquiry many kinds of scaffolds such as Bamboo Shed, Metal Shed, Hybrid Shed Engineering.)
                        </p>
						 </div>  
                   </li>
                </ul>
               
            </content>
        </section>      
<div class="clear"></div>
      <section class="type dark-theme" id="portfolio">
            <content class="container">
                <h2  style="color: #124d73;">OUR PROCESS</h2>  
                <ul style="margin-top:5%">
                    <li class="col-md-3 col-sm-12">
                            <img class="lazy" data-original="img/icon5.png"  />
                            <h4>1.Describe the Requirement</h4>
                            <p>Customers call the offer Hotline 68801666 or use WHATSAPP to tell the needs.</p>
                        
                    </li>
                        <li  class="col-md-3 col-sm-12">
                        
                            <img class="lazy" data-original="img/icon6.png" />
                            <h4>2.Preliminary Quote</h4>
                            <p>The company according to the customer's engineering needs it is necessary to make a scheme for free housing and make a preliminary offer.</p>
                        
                    </li>
                    <li  class="col-md-3 col-sm-12">
                        <div>
                            <img class="lazy" data-original="img/icon7.png" />
                            <h4>3.Implementation Plan</h4>
                            <p>The implementation of this customer's plan, and date and time of the company's scaffolding / bamboo shed.</p>
                        </div>
                    </li>
                    <li  class="col-md-3">
                        <div>
                            <img class="lazy" data-original="img/icon8.png" />
                            <h4>4.Construct Scaffolding</h4>
                            <p>Our company arrived at the company yard on time
                                carry on and complete the scaffolding / bamboo shed.</p>
                        </div>
                    </li>
                </ul>
                <ul >
                        <li  class="col-md-3">
                            
                                <img class="lazy" data-original="img/icon1.png" />
                                <h4>5.Client Project Completion</h4>
                                <p>Customer use of scaffolding / bamboo shed safety
                                complete the construction effectively.</p>
                            
                        </li>
                            <li   class="col-md-3">
                                <img class="lazy" data-original="img/icon2.png" />
                                <h4>6.Coordinate Dismantling</h4>
                                <p>The customer informed our company to finish the construction
                                and make an appointment to remove the date and time of the shed / bamboo shed.</p>
                        </li>
                        <li  class="col-md-3">
                            
                                <img class="lazy" data-original="img/icon3.png" />
                                <h4>7.Perform Dismantling</h4>
                                <p>Our company arrives at the working place on schedule
                                carry out and complete the demolition of a shed / bamboo shed.</p>
                            
                        </li>
                        <li  class="col-md-3">
                            
                                <img class="lazy" data-original="img/icon4.png" />
                                    <h4>8.Completion</h4>
                                <p>Successful completion of work, cash post, confidence guarantee.</p>
                            
                        </li>
                    </ul>
            </content>
        </section>


        <script>
            $('.col-md-3').css('text-align','center');

        </script>
        <!--  业务流程结束-->
        <!--            Articles      -->
        <section class="articles dark-theme " id="articles">
            <!--<content class="container" style="margin: 0;padding: 0;">-->
                <h2 style="text-align: center;">OUR CASE</h2>
                
                <style>
                @media only screen and (max-width: 1000px) {
					.ussevices .liimg {  display:block!important;width: 90%!important;height: 220px!important;float:none!important;margin:auto;}
					.ussevices .liimg img { width:100%!important;}
					.ussevices .lip, .ussevices .lips { width:auto!important;text-align:center;height:auto!important;}
                .share {
                      display: inline-block;
                      vertical-align: middle;
                      width: 100%;
                      height: 500px;
                      line-height:500px;
                                  }
                                      .share img {
                      display: inline-block;
                      vertical-align: middle;
                      width: 100%;
                  }
                }
                </style>
                <div class="swiper-container share" style="padding: 0;">
                    <div class="swiper-wrapper">
                    <?php foreach($data as $v){ ?>
                        <div class="swiper-slide" style="overflow: hidden;">    
                            <img src="hk-admin/upload/<?php echo $v['url']?>"  width="100%"/>
                        </div>
                    <?php };?>
                        <!-- <div class="swiper-slide" style="overflow: hidden;">
                            <img class="lazy" data-original="images/background_2.jpg" width="100%"/>
                        </div> -->
                    </div>
                    <!-- 如果需要分页器 -->
                    <!--<div class="swiper-pagination"></div>-->
    <style type="text/css">
        .swiper-button-prev {border: none;outline: none; left: 50px;background-size: 50px 50px;}
        .swiper-button-next {border: none;outline: none; right: 50px;background-size: 50px 50px;}
    </style>
    <div class="swiper-button-prev  swiper-button-white" ></div>
      <div class="swiper-button-next  swiper-button-white" ></div>
    </div>
            <!--</content>-->
        </section>

        <!--            Contact Us      -->
        <section class="contact-us light-theme" id="contact-us">
            <content class="container">
                <h2>CONTACT US</h2>

                <ul class="row">
                    <li class="col-12">
                    </li>

                    <li class="col-md-6">
                        <a href="mailto:contact@gm-scaffolding.com"><i class=""><img class="lazy" data-original="img/email.png"/></i>
                        <span>
                            contact@gm-scaffolding.com
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                        <a target="_blank" href="https://api.whatsapp.com/send?phone=85268801666"><i class=""><img class="lazy" data-original="img/phone.png"/></i>
                        <span>
                           +852 6880-1666 mobile
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                        <a>
                            <i class=""><img class="lazy" data-original="img/mobile2.png"/></i>
                            <span>
                                +852 3678-8457 office
                                <!--<i class="fal fa-angle-double-right"></i>-->
                            </span>
                        </a>
                    </li>

                    <li class="col-md-6">
                    <a>
                        <i class=""><img class="lazy" data-original="img/fax.png"/></i>
                        <span>
                            +852 3005-8573 fax
                            
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                    <a href="javascript:void(0);" onclick="toMap1();">
                        <i class=""><img class="lazy" data-original="img/address2.png"/></i>
                        <span>
                          36 Shung Ching San Tsuen,Yeun Long，New Territroies
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>
                    <li class="col-md-6">
                    <a href="javascript:void(0);" onclick="toMap2();">
                        <i class=""><img class="lazy" data-original="img/address2.png"/></i>
                        <span>
                      West Wing of the 2 floor,No. 822, Jiulong Kok Kok Road
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>
                </ul>
            </content>
        </section>

      <section class="about-us dark-theme" style="background: #fff">
            <content class="container">
                <div>
                    <div id="map" style="height:400px;border:1px solid gray"></div>

                </div>      
                <div style="margin-top: 30px;" >
                    <div id="map2" style="height:400px;border:1px solid gray"></div>
                </div>                
            </content>
        <script>
               
            var w=window.screen.width;
            $('#map').css('width',w);
            $('#map2').css('width',w);
        
            $('.bac4_ul ul li div').css('width',w);
  function init() {

  // 获取当前地理位置

  // navigator.geolocation.getCurrentPosition(function(position) {

  //  var coords = position.coords;

    // 设定地图参数，将用户的当前位置的经纬度设定为地图的中心点

    // var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
    var latlng = new google.maps.LatLng(22.434501,114.029948);
    var latlng2 = new google.maps.LatLng(22.335928, 114.147905);


    var myOptions = {
      // 设定放大倍数
      zoom:19,
      // 将地图中心点设定为指定的坐标点
      center: latlng,
      // 指定地图类型
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var myOptions2 = {
      // 设定放大倍数
      zoom:19,
      // 将地图中心点设定为指定的坐标点
      center: latlng2,
      // 指定地图类型
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };

      // 创建地图并在div中显示

    var map1;
    var map2;

    map1 = new google.maps.Map(document.getElementById("map"),myOptions);
    map2 = new google.maps.Map(document.getElementById("map2"),myOptions2);

    // 在地图上创建标记

    var marker = new google.maps.Marker({
      position: latlng,
      map: map1
    });

    var marker2 = new google.maps.Marker({
      position: latlng2,
      map: map2
    });

    // 设定标注窗口，并指定该窗口中的注释文字

    var infowindow = new google.maps.InfoWindow({

      content:"良師棚業有限公司"

    });

    var infowindow2 = new google.maps.InfoWindow({

      content:"良師棚業有限公司"

    });

    // 打开标注窗口

    infowindow.open(map1, marker);
    infowindow2.open(map2, marker2);

  // });
  }

//22.434501, 114.029948
//22.335928, 114.147905
            </script>
        </section>
    </main>

    <footer>
        <i class="fal fa-copyright"></i> <span class="current-year"></span> Grand Master Scaffolding Company Litimed </br> All Rights Reserved <br />
        
    </footer>

    <!--        Secondary Javascript        -->
    <script type="text/javascript" src="js/jquery.scrollto.min.js"></script>
    <script type="text/javascript" src="js/simplelightbox.min.js"></script>
    <script type="text/javascript">
    
        function ScrollPageToElement(jQuerySelector) { $("html, body").scrollTo($(jQuerySelector), 500); }

        $(function () {
            $(".brand").on("click", function () { ScrollPageToElement("nav"); });
        });

        $(function () {
            $("nav li").on("click", function () {
                var $this = $(this);
                ScrollPageToElement("main ." + $this.attr("data-section"));
            });
            $("nav .bars").on("click", function (e) { $(this).toggleClass("active"); e.stopPropagation(); });
            $(document).on("click", function () {
                $("nav .bars.active").removeClass("active");
            });
        });

        $(function () {
            var $Nav = $("nav");
            var $Main = $("main");
            var $Window = $(window);
            $Window.on("scroll", function () {
                if ($Window.scrollTop() > ($Main.position().top + 50)) {
                    $Nav.addClass("fixed-nav");
                    setTimeout(function () { $Nav.addClass("show"); }, 500);
                }
                else $Nav.removeClass("fixed-nav show");
            }).trigger("scroll");
        });

        $(function () { $('.news .lightbox a').simpleLightbox({ closeBtnClass: "fas fa-times" }); });

        $(function () {
            $(".current-year").text(new Date().getFullYear());
        });

        function toMap1(){
            var  h =$('#map').offset().top;
            $('body,html').animate({
               scrollTop:h
              }, 1000);
        }
        function toMap2(){
            var  h =$('#map2').offset().top;
            $('body,html').animate({
               scrollTop:h
              }, 1000);
        }
    </script>


   


    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="js/23ced510690b4a3cbcc791366394552d.js"></script>
    <script>
        
        if (document.location.protocol.toLowerCase().indexOf("file://") < 0) {
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());

            gtag('config', 'UA-63737888-8');
        }
    </script>
    <script src="js/swiper-4.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
      var mySwiper = new Swiper ('.swiper-container', {
            
          autoplay: {
              delay: 6000, //1秒切换一次
              disableOnInteraction: false,
          },
          loop: true,

             // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
        });
      

        /**
         * 图片延时加载
         */
          $(function() {

              $("img.lazy").lazyload({effect: "fadeIn"});

          });    
    </script>
     
</body>
</html>